<template>
  <view class="cashier">
    <Navbar title="支付" disabled occupy>
      <u-icon slot="left" name="arrow-left" color="#fff" />
    </Navbar>
    <view class="cashier-body">
      <view class="bill f f-ac f-jc">
        <image
          :src="webSrc('/profile/static/bill.png')"
          style="height: 268rpx; width: 268rpx"
        />
      </view>
      <u-text text="缴费须知：" color="#909090" size="14" bold line-height="50" />
      <u-text
        text="1 所有充值金额可同时用于临时充电与临时停车"
        color="#909090"
        size="14"
        line-height="30"
      />
      <u-text
        :text="`2 临时停车计费规则：${rules.stopHourAmount || '-'}元/小时，${
          rules.stopDayAmount || '-'
        }元/天`"
        color="#909090"
        size="14"
        line-height="30"
      />
      <u-text
        :text="`3 临时充电计费规则：${rules.chargeHourAmount || '-'}元/小时，${
          rules.chargeDayAmount || '-'
        }元/天`"
        color="#909090"
        size="14"
        line-height="30"
      />
      <view class="f f-ac f-js mt-20">
        <view class="member-choose f f-ac f-jb" @click="memberShow = true">
          <view>{{ chooseRow.label || "点击选择会员类型" }}</view>
          <u-icon name="arrow-down" color="#909090" />
        </view>
      </view>
      <view class="f f-ac price-row pt-20 pb-20">
        <view class="price">本次预充值金额：</view>
        <view class="f-1">
          <u-input
            v-model="chooseRow.price"
            type="number"
            disabled
            disabled-color="transparent"
            font-size="20"
            color="#ed4a49"
            placeholder="请选择充值金额"
            :placeholder-style="'font-size: 28rpx'"
            border="none"
          >
            <text slot="prefix" style="color: #ed4a49">￥</text>
          </u-input>
        </view>
      </view>
      <view class="f f-ac f-jb price-row hover pt-20 pb-20" @click="handlePay">
        <u-icon
          :name="require('../../static/icon-wechat.png')"
          size="23"
          space="10"
          label="微信支付"
          lebal-size="14"
          label-color="#fff"
        />
        <u-icon name="arrow-right" color="#fff" />
      </view>
    </view>
    <u-picker
      :show="memberShow"
      :columns="memberList"
      close-on-click-overlay
      key-name="label"
      :default-index="defaultIndex"
      @close="closeMember"
      @cancel="closeMember"
      @confirm="confirmMember"
    />
  </view>
</template>

<script>
import { getVipCostRules, getCostRules, postPayOrder, getPay } from "@/request/payApi.js";
export default {
  data() {
    return {
      rules: [], // 充电/停车规则
      chooseRow: {
        price: "",
        label: "",
        value: "",
      }, // 选择数据
      memberList: [
        [
          { price: 99999, label: "月卡", value: "MONTH" },
          { price: 99999, label: "季卡", value: "QUARTER" },
          { price: 99999, label: "年卡", value: "YEAR" },
        ],
      ],
      memberShow: false, // 会员弹窗
      isClick: false, // 防抖
      settingType: 2, // 会员类型 1停车/充电 2停车
      defaultIndex: [0], // 默认选中
    };
  },
  onLoad(e) {
    if (e.goodsType) {
      let type = e.goodsType.split("_")[0];
      this.chooseRow = this.memberList[0].find((i) => i.value == type);
      this.defaultIndex = [this.memberList[0].findIndex((i) => i.value == type)];
    }
    this.getRules();
    this.getCard();
  },
  methods: {
    // 获取充值规则
    getRules() {
      getCostRules().then((res) => {
        if (res.code == 200) {
          this.rules = res.data;
        } else {
          uni.showToast({
            title: res.msg || "服务器错误",
            icon: "none",
            mask: true,
          });
        }
      });
    },
    // 获取会员卡价格
    getCard() {
      getVipCostRules().then((res) => {
        if (res.code == 200) {
          this.settingType = res.data.settingType;
          this.memberList[0][0].price = res.data.monthAmount;
          this.memberList[0][1].price = res.data.quarterAmount;
          this.memberList[0][2].price = res.data.yearAmount;
        } else {
          uni.showToast({
            title: res.msg || "服务器错误",
            icon: "none",
            mask: true,
          });
        }
      });
    },
    // 微信支付
    handlePay() {
      if (this.chooseRow.price == "") {
        uni.showToast({ title: "请选择会员类型", icon: "none" });
        return;
      }
      if (this.isClick) return;
      uni.showLoading({
        title: "确认订单中",
        mask: true,
      });
      this.isClick = true;
      const { price, value } = this.chooseRow;
      let data = {
        goodsPrice: parseFloat(price),
        goodsType: `${value}_${this.settingType == 1 ? "CHARGE" : "DEPOSIT"}`,
      };
      postPayOrder(data).then((res) => {
        if (res.code == 200) {
          setTimeout(() => {
            uni.hideLoading();
            this.payPrice(res.data.sn, parseFloat(price));
          }, 1000);
        } else {
          uni.showToast({
            title: res.msg || "服务器错误",
            icon: "none",
            mask: true,
          });
          setTimeout(() => {
            this.isClick = false;
            uni.hideLoading();
          }, 1000);
        }
      });
    },
    // 支付
    payPrice(sn, price) {
      getPay("WECHAT", "MP", { orderType: "ORDER", sn, clientType: "MP" }).then((res) => {
        if (res.code == 200) {
          let pay = res.data;
          uni.requestPayment({
            appId: pay.appId,
            nonceStr: pay.nonceStr,
            package: pay.package,
            paySign: pay.paySign,
            signType: pay.signType,
            timeStamp: pay.timeStamp,
            success: () => {
              setTimeout(() => {
                uni.redirectTo({
                  url: `/pages/pay/payed?price=${price}`,
                });
              }, 1500);
            },
            fail: () => {
              this.isClick = false;
            },
          });
        } else {
          this.isClick = false;
          uni.showToast({
            title: res.msg || "服务器错误",
            icon: "none",
            mask: true,
          });
        }
      });
    },
    // 关闭弹窗
    closeMember() {
      this.memberShow = false;
    },
    // 选择弹窗
    confirmMember(v) {
      let obj = v.value[0];
      this.chooseRow = Object.assign({}, obj);
      this.memberShow = false;
    },
  },
};
</script>

<style lang="scss" scoped>
.cashier {
  width: 100%;
  min-height: 100vh;
  background: radial-gradient(48.31% 108.99% at 100% 1.17%, #142527 0%, #15161c 100%);
  .cashier-body {
    margin: 0 30rpx;
    .bill {
      height: 388rpx;
      border-bottom: 1rpx dashed #24de73;
    }
    .member-choose {
      width: 448rpx;
      height: 86rpx;
      color: #909090;
      font-size: 28rpx;
      padding: 0 30rpx;
      box-sizing: border-box;
      background-color: #15161c;
      border: 1rpx solid #909090;
      border-radius: 20rpx;
      &:active {
        background-color: #2a2c38;
      }
    }
    .price-row {
      border-bottom: 1rpx dashed #24de73;
      .price {
        color: #fff;
        font-size: 28rpx;
        font-weight: 600;
      }
    }
  }
}
.hover:active {
  background-color: #0c1617;
}
</style>
